<template>
	<view>
		<view class="index-grid">
			<view class="grid-title">隐患排查</view>
			<view class="grid-item">
				<view class="item" v-for="(item,index) in list1" :key="item.id" :class="[item.isMarginLeft?'item2':'']"
					@click="changePage(item)">
					<image class="item-icon" :src="item.ioc"></image>
					<view class="item-text">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="index-grid">
			<view class="grid-title">教育培训</view>
			<view class="grid-item">
				<view class="item" v-for="(item,index) in list2" :key="item.id" :class="[item.isMarginLeft?'item2':'']"
					@click="changePage(item)">
					<view v-if="item.readNum>0" class="red-dot " :class="[item.readNum>99?'red-dot2':'']">
						{{item.readNum>99?'99+':item.readNum}}
					</view>
					<image class="item-icon" :src="item.ioc"></image>
					<view class="item-text">{{item.title}}</view>
				</view>

			</view>
		</view>
		<view class="line"></view>
		<view class="index-grid">
			<view class="grid-title">设备管理</view>
			<view class="grid-item">
				<view class="item" v-for="(item,index) in list3" :key="item.id" :class="[item.isMarginLeft?'item2':'']"
					@click="changePage(item)">
					<view v-if="item.readNum>0" class="red-dot " :class="[item.readNum>99?'red-dot2':'']">
						{{item.readNum>99?'99+':item.readNum}}
					</view>
					<image class="item-icon" :src="item.ioc"></image>
					<view class="item-text">{{item.title}}</view>
				</view>
			</view>
		</view>
		<tabBar :current="0" />
	</view>
</template>

<script>
	import tabBar from '../../components/tabbar/tabbar.vue';
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				list1: [{
					id: 1,
					title: "安全巡查",
					ioc: "../../static/images/index/anquan.png",
					isMarginLeft: false,
					url: "/pages/subPackagesA/troble/troble"
				},{
					id: 2,
					title: "隐患随手拍",
					ioc: "../../static/images/index/suishoupai.png",
					isMarginLeft: true,
					url: "/pages/subPackagesA/randomClap/mine"
				},{
					id: 3,
					title: "隐患管理",
					ioc: "../../static/images/index/yinhuanguanli.png",
					isMarginLeft: true,
					url: "/pages/subPackagesA/hidden/hiddenList"
				}],
				list2: [{
						id: 1,
						title: "我的培训",
						ioc: "../../static/images/index/peixun.png",
						isMarginLeft: false,
						url: "/pages/subPackagesA/mineTrain/index",
						readNum: 0
					},
					{
						id: 2,
						title: "我的考试",
						ioc: "../../static/images/index/kaoshi.png",
						isMarginLeft: true,
						url: "/pages/subPackagesA/exam/index",
						readNum: 0
					},
					{
						id: 3,
						title: "学习中心",
						ioc: "../../static/images/index/xuexi.png",
						isMarginLeft: true,
						url: "/pages/subPackagesA/learning/index",
						readNum: 0
					}
				],
				list3: [
					{
						id: 1,
						title: "一键扫码",
						ioc: "../../static/images/index/saoma.png",
						isMarginLeft: false,
						url: "/pages/subPackagesA/saoma/list"
					},
					{
						id: 2,
						title: "维修管理",
						ioc: "../../static/images/index/weixiu.png",
						isMarginLeft: true,
						url: "/pages/subPackagesB/weiwaiRepair/index",
						// url: "/pages/subPackagesA/repairList/index",
						readNum: 0
					},
					{
						id: 3,
						title: "设备维保",
						ioc: "../../static/images/index/shebeiweibao.png",
						isMarginLeft: true,
						url: "/pages/subPackagesA/weibaoTask/index",
						readNum: 0
					},
					{
						id: 4,
						title: "设备点检",
						ioc: "../../static/images/index/shebeidianjian.png",
						isMarginLeft: true,
						url: "/pages/subPackagesA/checkupTask/index",
						readNum: 0,
					}
				],
				comList: [],

			}
		},
		computed: {},
		onLoad() {
			uni.hideShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShow() {
			uni.removeStorageSync('ksitme');
		},
		methods: {
			changePage(e) {
				if (!e.url) {
					uni.showToast({
						icon: 'none',
						title: e.title + '正在开发中...'
					})
				} else {
					console.log('eeee', e.url)
					if (e.title == '一键扫码') {
						// uni.navigateTo({
						// 	url: e.url+'?id='+"da1ae199904c486ca8160c43690ad4c1"
						// })
						uni.scanCode({
							//是否只能从相机扫码,不能从相册扫码
							onlyFromCamera: true,
							//规定扫码类型  字节跳动小程序不支持此参数
							// barcode就是一维码(条形码)  qrcode就是(er)维码 
							// datamatrix就是Data Matrix码   pdf417就是PDF417条码
							scanType: ['barCode', 'qrCode', 'datamatrix', 'pdf417'],
							// 是否启动自动识别字符编码功能
							autoDecodeCharset: false,
							// 是否开启自动放大功能  仅 App-Android (3.5.4+) 支持
							autoZoom: false,
							// 是否支持手动输入条形码  仅飞书小程序（V3.14.0）支持
							barCodeInput: false,
							success: function(res) {
								console.log('条码内容：' + res.result);
								let codeInfo = res.result.split('?')[1]
								//这里获取扫码信息并且对扫码信息进行解析
								let equId = codeInfo.split('&')[0];
								let deviceNum = codeInfo.split('&')[1];
								console.log(equId, deviceNum)
								uni.navigateTo({
									url: e.url + '?' + codeInfo
								})
							},
							fail: function(error) {
								console.log('扫码失败了')
							}
						});
					} else {
						uni.navigateTo({
							url: e.url
						})

					}
				}

			},

		}
	}
</script>

<style lang="scss">
	// page {
	// 	background: #f2f2f2;
	// }
	.index-grid {
		padding: 40rpx 20rpx;
		background: #fff;

		.grid-title {
			font-size: 30rpx;
			font-weight: 600;
			letter-spacing: 0px;
			line-height: 0px;
			color: #000000;
		}

		.grid-item {
			margin-top: 20rpx;
			padding-left: 20rpx;
			display: flex;
			align-items: center;

			.item {
				padding: 20rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;

				.red-dot {
					z-index: 22;
					position: absolute;
					margin-left: 80rpx;
					margin-top: -15rpx;
					border-radius: 50%;
					width: 32rpx;
					height: 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					background: #fa4016;
					color: #fff;
				}

				.red-dot2 {
					width: 42rpx;
					height: 32rpx;
					line-height: 32rpx;
					border-radius: 10rpx;

				}

				.item-icon {
					width: 96rpx;
					height: 96rpx;
				}

				.item-text {
					font-size: 13px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 0px;
					color: #000000;
					margin-top: 40rpx;
				}
			}

			.item2 {
				margin-left: 60rpx;
			}
		}

	}

	.line {
		width: 100%;
		height: 20rpx;
		background: #f2f2f2;
	}
</style>